<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title>Owners</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/bootstrap.min.js"></script>


</head>
<body>

<div class="container">

    <!-- sample header -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Static Brand</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="employeeList.html">Link1</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </nav>
    <!-- sample header end -->

    <h1 layout:fragment="header">Owners</h1>

    <div layout:fragment="content">

        <script type="text/javascript">
            $(document).ready(function () {
                $('#owner_list_table').DataTable();
            });
        </script>

        <table id="owner_list_table" class="table table-striped table-hover table-bordered display">
            <thead>
            <tr>
                <th>Nam11</th><!--pdf?-->
                <th>Address</th>
                <th>City</th>
                <th>Telephone</th>
                <th>Pets</th>
            </tr>
            </thead>
            <tbody>
            <!--/*@thymesVar id="selections" type="java.util.Collection"*/-->

            <tr th:each="owner : ${selections}">
                <!--/*@thymesVar id="owner" type="cn.wilmar.petclinic.model.Owner"*/-->
                <td>
                    <a href="createOrUpdateOwnerForm.html" th:href="@{|/owners/${owner.id}|}"
                       th:text="|${owner.firstName} ${owner.lastName}|">yinguowei</a>
                </td>
                <td th:text="${owner.address}">No. 31, Sfea Rd. Shanghai China</td>
                <td th:text="${owner.city}">Shanghai</td>
                <td th:text="${owner.telephone}">1231214121</td>
                <td>
                    <span th:each="pet:${owner.pets}" th:text="${pet.name}" th:remove="tag">Dog, Cat, Bird..</span>
                </td>
            </tr>
            <tr th:remove="all">
                <td><a href="createOrUpdateOwnerForm.html">name2</a></td>
                <td>No. 31, Sfea Rd.</td>
                <td>Shanghai</td>
                <td>12399990000</td>
                <td>12399990000</td>
            </tr>
            <tr th:remove="all">
                <td><a href="createOrUpdateOwnerForm.html">name3</a></td>
                <td>No. 31, Sfea Rd.</td>
                <td>Shanghai</td>
                <td>12399990000</td>
                <td>12399990000</td>
            </tr>
            <tr th:remove="all">
                <td><a href="createOrUpdateOwnerForm.html">name4</a></td>
                <td>No. 31, Sfea Rd.</td>
                <td>Shanghai</td>
                <td>12399990000</td>
                <td>12399990000</td>
            </tr>
            <tr th:remove="all">
                <td><a href="createOrUpdateOwnerForm.html">name5</a></td>
                <td>No. 31, Sfea Rd.</td>
                <td>Shanghai</td>
                <td>12399990000</td>
                <td>12399990000</td>
            </tr>

            </tbody>
        </table>

        <br/>
        <a class="btn btn-default" href="createOrUpdateOwnerForm.html" th:href="@{'/owners/new'}">Add Owner</a>

    </div>

    <div class="text-center">
        sample copyright 2016
    </div>
</div>
</body>
</html>
